<template>
  <div class="app-container mod-hot-search">
    <!-- 搜索相关区域 -->
    <div class="filter-container">
      <el-form :inline="true" :model="pageQuery" class="demo-form-inline">
        <el-form-item label="手机号码">
          <el-input
            v-model="pageQuery.contactPhone"
            size="mini"
            placeholder="请输入手机号码"
          />
        </el-form-item>

        <el-form-item label="创建时间">
      <el-date-picker
        v-model="times"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search"
            @click="getPage()"
            >查询</el-button
          >
          <el-button
            size="mini"
            icon="el-icon-delete"
            @click="clearSearchInfo()"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="filter-container">
      <el-form :inline="true" :model="pageQuery" class="demo-form-inline">
        <el-form-item>
          <el-button
            type="primary"
            size="medium"
            icon="el-icon-plus"
            @click="getPages(1)"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-radio-group v-model="tabPosition" style="margin-bottom: 30px" @input="onpea">
        <el-radio-button label="onter1">企业</el-radio-button>
        <el-radio-button label="onter2">个人</el-radio-button>
      </el-radio-group>
    <!-- 列表相关区域 -->
    <el-table
      v-loading="pageLoading"
      :data="pageVO.list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <!-- 订单编号 -->
      <el-table-column :label="tabPosition=='onter1'?'企业名称':'姓名'" prop="investorName" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.investorName }}</span>
        </template>
      </el-table-column>
      <!-- 吧台编号 -->
      <el-table-column label="手机号" prop="contactPhone" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.contactPhone }}</span>
        </template>
      </el-table-column>
      <!-- 所属商品 -->
      <el-table-column
        label="吧台数量"
        prop="createTime"
        width="250"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.barCounterCount?row.barCounterCount:'80' }}</span>
        </template>
      </el-table-column>
      <!-- 订单数量 -->
      <el-table-column label="总收益" prop="seq" align="center">
        <template slot-scope="{ row }">
          <span>{{   row.totalIncome?row.totalIncome:'200￥' }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" prop="createTime" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('table.actions')"
        align="center"
        width="200"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="getPages(row)">
            编辑
          </el-button>
          <el-button
            type="primary"
            size="mini"
            @click="goDetail(row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <pagination
      v-show="pageVO.total > 0"
      :total="pageVO.total"
      :page.sync="pageQuery.pageNum"
      :limit.sync="pageQuery.pageSize"
      @pagination="getPage()"
    />
    <el-dialog
      :title="oterNames"
      width="750px"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="投资人类型" :label-width="formLabelWidth">
          <el-select
            style="width: 65%"
            @change="changes"
            v-model="form.region"
            placeholder="请选择投资人类型"
          >
            <el-option label="企业" value="企业"></el-option>
            <el-option label="个人" value="个人"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="form.region == '企业'"
          label="企业名称："
          :label-width="formLabelWidth"
          prop="qiName"
        >
          <el-input
            placeholder="请输入企业名称"
            v-model="form.qiName"
            style="width: 65%"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-else
          label="姓名："
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input
            placeholder="请输入姓名"
            v-model="form.name"
            style="width: 65%"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="form.region == '企业'"
          label="划款户名："
          :label-width="formLabelWidth"
          prop="TracName"
        >
          <el-input
            placeholder="请输入划款户名"
            v-model="form.TracName"
            style="width: 65%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="划款账号："
          :label-width="formLabelWidth"
          prop="Traccount"
        >
          <el-input
            placeholder="请输入划款账号"
            v-model="form.Traccount"
            style="width: 65%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="支行信息："
          :label-width="formLabelWidth"
          prop="Branch"
        >
          <el-input
            placeholder="请输入支行信息"
            v-model="form.Branch"
            style="width: 65%"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="form.region == '企业'"
          label="联系人："
          :label-width="formLabelWidth"
        >
          <el-input
            placeholder="请输入联系人"
            v-model="form.contacts"
            style="width: 65%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="联系方式："
          :label-width="formLabelWidth"
          prop="information"
        >
          <el-input
            placeholder="请输入联系方式"
            v-model="form.information"
            style="width: 65%"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注：" :label-width="formLabelWidth">
          <el-input
            style="width: 65%"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="form.Remarks"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dahdhie">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
  import moment from 'moment';
import permission from "@/directive/permission/index.js";
import Pagination from "@/components/Pagination";
import * as api from "@/api/investor/index";

export default {
  name: "",
  components: { Pagination },
  directives: { permission },
  data() {
    return {
      tabPosition: "onter1",
      dialogFormVisible: false,
      oterNames: "新增",
      form: {
        name: "", //姓名
        region: "企业",
        information: "",
        storId:"",
        Branch: "",
        Traccount: "",
        TracName: "",
        qiName: "",
        Remarks: "",
        contacts: "",
      },
      formLabelWidth: "120px",
      // 查询的参数
      pageQuery: {
        pageSize: 10,
        pageNum: 1,
        investorType:1,
        createTime:null,
        endAt:null,
        contactPhone:null,
      },
      times:[],

      // 返回参数
      pageVO: {
      list: [
      {
        name:"123"
      }
      ], // 返回的列表
        total: 0, // 一共多少条数据
        pages: 0, // 一共多少页
      },
      // loading
      pageLoading: false,
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        information: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
        ],
        Branch: [
          { required: true, message: "请输入支行信息", trigger: "blur" },
        ],
        Traccount: [
          { required: true, message: "请输入划款账号", trigger: "blur" },
        ],
        TracName: [
          { required: true, message: "请输入划款户名", trigger: "blur" },
        ],
        qiName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {
    this.getPage();
  },
  methods: {
    onpea(){
      if(this.tabPosition=='onter1'){
        this.pageQuery.investorType = 1;
      }else{
        this.pageQuery.investorType = 2;

      }
      this.getPage()
    },
    dahdhie() {
      this.dialogFormVisible = false;
      this.$refs.form.resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form);
            this.addeidt();

        } else {
          return false;
        }
      });
    },
    changes(e) {
      this.$refs.form.resetFields();
      this.form.name = "";
      this.form.information = "";
      this.form.Branch = "";
      this.form.Traccount = "";
      this.form.TracName = "";
      this.form.qiName = "";
      this.form.Remarks = "";
      this.form.contacts = "";
    },
    getPages(val) {
      this.form.name = "";
      this.form.information = "";
      this.form.region = "企业";
      this.form.Branch = "";
      this.form.Traccount = "";
      this.form.TracName = "";
      this.form.qiName = "";
      this.form.Remarks = "";
      this.form.contacts = "";
      if (val == 1) {
        this.oterNames = "新增";
      } else {
        this.oterNames = "编辑";
        this.form.storId=val.barCounterInvestorId

        if (val.investorType == 2) {
          this.form.region = "个人";
          this.form.name = val.investorName;
          this.form.Branch = val.bankSubbranchInfo;
          this.form.Traccount = val.bankAccountNumber;
          this.form.information = val.contactPhone;
          this.form.Remarks = val.remark;
        } else {
          this.form.region = "企业";
          this.form.qiName = val.investorName;
          this.form.TracName = val.bankName;
          this.form.Traccount = val.bankAccountNumber;
          this.form.Branch = val.bankSubbranchInfo;
          this.form.information = val.contactPhone;
          this.form.contacts = val.contacts;
          this.form.Remarks = val.remark;
        }
      }
      this.dialogFormVisible = true;
    },
    addeidt() {
      let formData = {};
      if (this.form.region == "个人") {
        formData.investorName = this.form.name;
        formData.investorType = 2;
        formData.bankSubbranchInfo = this.form.Branch;
        formData.bankAccountNumber = this.form.Traccount;
        formData.contactPhone = this.form.information;
        formData.remark = this.form.Remarks;
      } else {
        formData.investorName = this.form.qiName;
        formData.investorType = 1;
        formData.bankName = this.form.TracName;
        formData.bankAccountNumber = this.form.Traccount;
        formData.bankSubbranchInfo = this.form.Branch;
        formData.contactPhone = this.form.information;
        formData.contacts = this.form.contacts;
        formData.remark = this.form.Remarks;
      }

      if (this.oterNames == "新增") {
        api.addsave(formData).then((res) => {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.dialogFormVisible = false;
          this.getPage();
          this.changes();
        });
      } else {
        formData.barCounterInvestorId=this.form.storId
        api.putsave(formData).then((res) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.dialogFormVisible = false;
          this.getPage();
          this.changes();
        });
      }
    },

    getPage() {
      if (this.times && this.times.length === 2) {
        const [start, end] = this.times;
        const startTime = `${start.getFullYear()}-${(start.getMonth()+1).toString().padStart(2, '0')}-${start.getDate().toString().padStart(2, '0')} ${start.getHours().toString().padStart(2, '0')}:${start.getMinutes().toString().padStart(2, '0')}:${start.getSeconds().toString().padStart(2, '0')}`;
        const endTime = `${end.getFullYear()}-${(end.getMonth()+1).toString().padStart(2, '0')}-${end.getDate().toString().padStart(2, '0')} ${end.getHours().toString().padStart(2, '0')}:${end.getMinutes().toString().padStart(2, '0')}:${end.getSeconds().toString().padStart(2, '0')}`;
        this.pageQuery.createTime=startTime
        this.pageQuery.endAt=endTime
      } else {
        delete this.pageQuery.createTime
        delete this.pageQuery.endAt
      }
      if (this.pageQuery.contactPhone == '') {
        delete this.pageQuery.contactPhone
      }

      this.pageLoading=true
      api.getOnPage(this.pageQuery).then((res) => {
        this.pageVO.list = res.list;
        this.pageVO.total = res.total;
        this.pageVO.pages = res.pages;
        this.pageLoading=false
      });
    },
    goDetail(val) {
      this.$router.push({
        path: "/barcounter/investor/detail",
        query:val
      });
    },

    clearSearchInfo() {

      // 若请求参数某项没值，则不传此参数
      this.pageQuery.pageNum = 1;
      this.times=[]
      this.pageQuery.pageSize = 10;
      this.pageQuery.contactPhone = null;
      this.pageQuery.createTime = null;
      this.pageQuery.endAt = null;
      this.getPage();
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.mod-hot-search {
  .el-form--inline {
    .el-form-item {
      margin-right: 20px;
    }
  }
}
</style>
  